<script setup>
import {ref} from "vue";

const props = defineProps({
  title: {
    type: Object,
    required: true,
    default: () => ({
      title: '',
      requirements: '',
      content: '',
      children: [],
      status: 'waiting' // 状态可以是 'waiting', 'generating', 'completed', 'error'
    })
  },
  onSelect: {
    type: Function,
    default: () => {}
  },
  selected: {
    type: Object,
    default: null
  }
});
const open = ref(true);
const openOrClose = () => {
  console.log('openOrClose', open.value);
  open.value = !open.value;
};
if (!props.title.status) {
  props.title.status = 'waiting'; // 默认状态为等待生成
}
if (!props.title.children) {
  props.title.children = []; // 确保 children 是一个数组
}
const selectTitle = () => {
  props.onSelect(props.title);
};
</script>

<template>
  <div class="result-left-nav-item" @click.stop="selectTitle">
    <div class="title-content" :class="{ active: props.title.status === 'generating' , selected: props.selected === props.title}">
      <!-- 展开/折叠 -->
      <div class="title-head">
        <img src="../../../assets/icons/trangle-down.svg" alt="Arrow Icon" class="icon arrow-icon"
             v-if="props.title.children && props.title.children.length > 0" :class="{ open: open }"
             @click.stop="openOrClose">
        <div class="text">
          {{title.title}}
        </div>
      </div>
      <div class="title-status">
        <div class="title-status-text">
          {{props.title.status === 'waiting' ? '等待生成' : props.title.status === 'generating' ? '生成中' : props.title.status === 'completed' ? '已完成' : '生成失败'}}
        </div>
        <img src="../../../assets/icons/waiting.svg" alt="Loading Icon" class="icon status-icon" v-if="props.title.status === 'waiting'">
        <img src="../../../assets/icons/running.svg" alt="Loading Icon" class="icon status-icon running" v-if="props.title.status === 'generating'">
        <img src="../../../assets/icons/success.svg" alt="Success Icon" class="icon status-icon" v-if="props.title.status === 'completed'">
        <img src="../../../assets/icons/error.svg" alt="Error Icon" class="icon status-icon" v-if="props.title.status === 'error'">
      </div>
    </div>
<!--    <div class="result-left-nav-item" v-if="props.title.children" v-for="item in props.title.children" :key="item">{{item.title}}</div>-->
    <div class="sub-title-content" :class="{ open: open }">
      <document-result-title v-if="props.title.children" v-for="item in props.title.children" :key="item" :title="item"
                             :on-select="props.onSelect" :selected="props.selected"/>
    </div>
  </div>
</template>

<style scoped lang="less">
.result-left-nav-item {
  cursor: pointer;
  padding-left: 14px;
  &.active {
    background-color: #007bff;
    color: #fff;
  }

  .title-content{
    line-height: 30px;
    font-size: 14px;
    border-radius: 4px;
    padding: 0 8px;
    &:hover {
      background-color: #f0f0f0;
    }
    &.active {
      .title-status{
        color: #007bff;
      }
    }
    &.selected {
      background-color: #e6f7ff;
      .title-head{
        color: #007bff;
      }
    }

    .title-head{
      display: flex;
      align-items: center;
      color: #333;
      font-weight: 500;

      .icon{
        width: 16px;
        height: 16px;
        margin-right: 3px;
        transition: transform 0.2s ease;
        transform: rotate(-90deg);
        &.open{
          transform: rotate(0deg);
        }
      }
      .text{
        user-select: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .title-status{
      display: flex;
      align-items: center;
      color: #999;
      font-size: 12px;
      margin-left: 10px;
      justify-content: space-between;

      .title-status-text{
        margin-right: 5px;
      }

      .status-icon{
        width: 16px;
        height: 16px;

        &.running {
          animation: spin 1s linear infinite;
        }

        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      }
    }

  }

  .sub-title-content{
    height: 0;
    overflow: hidden;
    &.open {
      height: max-content;
    }
  }

}
</style>
